<template>

  <div>
    <Title></Title>
    <div style="background-color: white;padding: 8px">
      <p style="font-weight: 600">接口支持列表</p>
      <p style="font-weight: 400;line-height: 30px;font-size: 15px">
        抖音、快手、小红书、微博、微视、今日头条、西瓜视频、哔哩哔哩、秒拍、美拍、皮皮虾、皮皮搞笑、全民小视频、火山小视频、好看视频、看点视频、全民K歌、看点视频、看点快报、微视、QQ看点、陌陌、唱吧、YY、小咖秀、糖豆、最左、配音秀、酷狗音乐、酷我音乐、看看视频、梨视频、网易云音乐、大众点评、虎牙视频、懂车帝、剪映、趣头条、美图秀秀、刷宝、迅雷、京东、淘宝、天猫、拼多多、微信公众号、火锅视频、轻视频、度小视、
        百度视频、QQ浏览器、uc浏览器、oppo浏览器、油果浏览器、新片场、万能钥匙WiFi、知乎、腾讯新闻、人民日报、开眼、微叭、微云、快看点、TikTok、youtube、twitter、VUE、vigo、ACfun、now、等80多个短视频去水印和常用图集解析，主页批量支持抖音、快手主页批量解析。</p>
    </div>

    <div
      style="border: 1px solid #59b5c8;color: white;padding: 20px;border-radius: 10px;margin-top: 10px;margin-bottom: 10px">
      <p>短视频在线去水印解析 --请将您复制的短视频分享链接粘贴到下面的输入框进行解析。</p>
      <input v-model="url_str" style="width: 100%;padding: 8px;margin-top: 10px"
             placeholder="在此处输入app内复制的连接"/>
      <button style="width: 100%;margin-top: 10px" @click="toRemoveWatermarkAction">去水印</button>

      <div style="display: flex;margin-top: 20px;align-items: center" v-show="isR">
        <p style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ video_url }}</p>
        <button @click="copyUrl">复制</button>
      </div>


    </div>
  </div>

</template>

<script>
import Title from "../../components/title.vue"
import {
  removeWatermarkNet
} from "../../api/http"
import fa from "element-ui/src/locale/lang/fa";

export default {
  name: "RemoveWatermark",
  components: {
    Title
  },
  data() {
    return {
      url_str: "https://v.douyin.com/jepL7a2",
      video_url: "",
      isR:false
    }
  },
  methods: {
    copyUrl() {
      var txt = this.video_url; // 获取文本
      let textarea = document.createElement("textarea"); // 创建textarea文本框
      textarea.value = txt;
      textarea.readOnly = "readOnly";
      document.body.appendChild(textarea); // 追加元素
      textarea.select() // 选中文本内容
      let result = document.execCommand("copy"); // 执行浏览器复制命令
      if (result) {
        alert("复制成功")
      }
      textarea.remove();
    },
    async toRemoveWatermarkAction() {
      console.log("toRemoveWatermarkAction==>  " + this.url_str)
      var data = await removeWatermarkNet(this.url_str)
      console.log("toRemoveWatermarkAction==> data " , data)

      var bean = data.data.data

      console.log("toRemoveWatermarkAction==> bean " , bean)
      if (bean.code !== 200) {
        this.isR=false
        return
      }
      var video = bean.data.video

      this.video_url = video
      this.isR=true


    }
  }
}
</script>

<style scoped lang="less">


input:focus {
  outline: 1px solid greenyellow;
  box-sizing: border-box !important;
}

button {
  padding: 8px;
  background-color: #3578f3;
  color: white;
}

button:hover {
  background-color: #4287f7;
}

</style>
